<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="wangbo">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        @keyframes movey {
            0%{transform: translateY(1000px) }
            100%{transform: translateY(0px)}
        }
        @keyframes feny {
            0%{transform: translate(0,0);opacity: 1;}
            50%{transform: translate(0,0);opacity: 1;}
            100%{transform: translateY(400px);opacity: 0;}
        }
        *{margin: 0;padding: 0;}
        div{border: 1px solid #f00;width: 200px;height: 200px;box-sizing: border-box;}
        /* linear 匀速移动 */
        .body{margin: 100px auto; height: 1000px;border-width: 0px;;
        animation: movey 25s linear;
        }
        .body div{position: relative;top: 0px;}
        .wei{animation: feny 5s linear forwards;}
        /* 并集选择器,交集选择器,可以提高权重 */
        div.zuo{ transform: skew(30deg) rotate(30deg);position: absolute;  right: -200px; }
        div.you{ transform: skew(-30deg) rotate(-30deg);position: absolute; left:-200px}
        /* 第几个孩子,孩子的类名必须是bd */
        .bd:nth-child(4){animation: feny 5s 5s linear forwards;}
        .bd:nth-child(3){animation: feny 5s 10s linear forwards;}
        .bd:nth-child(2){animation: feny 5s 15s linear forwards;}
    </style>
</head>
<body>
 <div class="body">
    <div class="tou">头</div>
    <div class="bd">1</div>
    <div class="bd">2</div> 
    <div class="bd">3</div>
    <div class="wei">
        <div class="zuo"></div>
        <div class="you"></div>
    </div>
 </div>   


</body>

</html>